<template>
  <div class="content-page">
    <div class="page-header">
      <el-button style="width: auto" v-if="!edit" @click="editClick"><i class="iconfont icon-bianji"></i>开启编辑
      </el-button>
      <el-button type="delet" style="width: auto" v-if="edit" @click="editClick"><i class="iconfont icon-bianji"></i>保存编辑
      </el-button>
      <el-button class="right" type="noticonsecondBtn" v-if="edit" @click="visiDialog = true">添&ensp;加</el-button>
    </div>
    <div class="sub-content">
      <div class="type-list">
        <ul>
          <el-scrollbar style="height: 100%">
            <li v-for="(v,i) in types" :key="i" :class="{'active':typeSelected===i}" @click="typeChange(i,$event)" >
              <span class="icon"></span>
              <span v-if="!edit||v.name==='全部'">{{v.name}}</span>
              <el-input v-model="v.name" placeholder="" style="width: 55px" v-if="edit&&v.name!=='全部'"></el-input>
              <span type="text" class="right el-button--text" v-if="v.name!=='全部'&&edit" @click.stop="typeDel(i)">删除</span>
            </li>
            <button class="add-btn" @click="addType" v-if="edit"><i class="iconfont icon-tianjia"></i></button>
          </el-scrollbar>
        </ul>
      </div>
      <div class="table-content">
        <el-scrollbar style="height: 100%;">
          <ul>
            <li v-for="(v,i) in tableData" :key="i" style="padding-right:12px;"><i class="iconfont icon-ic-description-px"></i>
              <span class="bold">【<span v-for="(x,y) in types" :key="y" v-if="v.type===x.type">{{x.name}}</span>】</span>
              <span>{{v.title}}</span>
              <span class="right bts el-button--text" v-if="edit">删除</span>
              <span class="right" style="margin-right:12px;">{{v.time}}</span>
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </div>
    <div class="table-pagination-wrap">
      <el-pagination
        @size-change="paginationSizeChange"
        @current-change="paginationChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        popper-class="select-pagination-option"
        background
        :small="true"
        :page-sizes="pageList"
        layout="total, sizes, slot,->,prev, pager, next, jumper"
        :total="total">
        <template v-slot:default>
          <span class="el-pagination__current">当前第{{ currentPage }}/{{totalPageNumber}}页</span>
        </template>
      </el-pagination>
    </div>
     <el-dialog :visible.sync="visiDialog"  width="360px" title="添加" :before-close="closess">
       <div class="dialogcontent">
             <div class="dialog-layout">
                    <ul>
                      <li>
                          <div style="margin-right:42px">
                                <span class="layoutspan">文件等级 : </span>&nbsp;
                                <div class="layoutBox" style="width:200px">
                                  <el-select v-model="value" placeholder="请选择">
                                        <el-option
                                          v-for="item in optionData"
                                          :key="item.value"
                                          :label="item.label"
                                          :value="item.value">
                                        </el-option>
                                  </el-select>
                                </div>
                          </div>
                      </li>
                      <li>
                           <span class="layoutspan">标题名称 : </span>&nbsp;
                            <div class="layoutBox" style="width:200px">
                                  <el-input placeholder="请输入" v-model="value"></el-input>
                            </div>
                      </li>
                      <li>
                              <span class="layoutspan">附件上传 : </span>&nbsp;
                              <div class="layoutBox" style="width:200px">
                                <el-upload
                                  class="upload-demo"
                                  ref="upload"
                                  action="https://jsonplaceholder.typicode.com/posts/"
                                  :on-preview="handlePreview"
                                  :on-remove="handleRemove"
                                  :file-list="fileList"
                                  :auto-upload="false">
                                  <el-button slot="trigger"><i class="icon-shangchuan1 iconfont"></i> 选择文件</el-button>
                                </el-upload>
                              </div>
                      </li>
                    </ul>
             </div>
       </div>
       <div slot="footer" class="dialog-footer">
          <el-button type="noticon">保 存</el-button>
          <el-button type="noticonsecondBtn" @click="visiDialog = false">关 闭</el-button>
       </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "learnFromOthers",
  data() {
    return {
      edit: false,
      fileList: [],
      visiDialog: false,
      // qx:sessionStorage.getItem('userInfo'),
      types: [
        { type: undefined, name: "全部" },
        { type: 10, name: "中央" },
        { type: 20, name: "省级" },
        { type: 30, name: "市级" }
      ],
      typeSelected: 0,
      optionData: [],
      value: "",
      tableData: [
        {
          type: 10,
          title: "中办国办印发《关于在湖泊实施湖长制的指导意见》",
          time: "2002-08-29"
        },
        {
          type: 10,
          title: "中办国办印发《关于在湖泊实施湖长制的指导意见》",
          time: "2002-08-29"
        },
        {
          type: 10,
          title: "中办国办印发《关于在湖泊实施湖长制的指导意见》",
          time: "2002-08-29"
        },
        {
          type: 20,
          title: "中办国办印发《关于全面推行河长制的意见》",
          time: "2018-01-05"
        },
        {
          type: 20,
          title: "中办国办印发《关于全面推行河长制的意见》",
          time: "2018-01-05"
        },
        {
          type: 20,
          title: "中办国办印发《关于全面推行河长制的意见》",
          time: "2018-01-05"
        },
        {
          type: 30,
          title: "湖南省《关于全面实施河长制的指导意见》",
          time: "2018-01-05"
        },
        {
          type: 30,
          title: "湖南省《关于全面实施河长制的指导意见》",
          time: "2018-01-05"
        },
        {
          type: 30,
          title: "湖南省《关于全面实施河长制的指导意见》",
          time: "2018-01-05"
        },
        {
          type: 30,
          title: "湖南省《关于全面实施河长制的指导意见》",
          time: "2018-01-05"
        }
      ],
      currentPage: 1, //分页组件当前页
      total: 200, //分页总条数
      pageSize: 10, //分页每页多少条数据
      pageList: [10, 15, 20] //设置每页多少条
    };
  },
  methods: {
    closess(done) {
      done();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    editClick() {
      this.edit = !this.edit;
    },
    paginationChange(val) {
      //分页页码改变时执行
      this.currentPage = val;
    },
    paginationSizeChange(val) {
      //分页pageSize改变时执行
      this.currentPage = 1;
      this.pageSize = val;
    },
    typeChange(n, event) {
      if (
        event.srcElement.nodeName === "LI" ||
        event.srcElement.nodeName === "SPAN"
      ) {
        this.typeSelected = n;
      }
    },
    typeDel(n) {
      this.$yfConfirm("点击删除将删除此类型", "是否删除该类型")
        .then(() => {
          this.types.splice(n, 1);
        })
        .catch(() => {});
    },
    addType() {
      let n = 0;
      for (let i of this.types) {
        if (!i.name) {
          n++;
        }
      }
      if (n) {
        this.$yfMessage.warning("类型名称不能为空");
      } else {
        let obj = { type: this.types.length + "0", name: "" };
        this.types.push(obj);
      }
    }
  },
  created() {
    this.$store.commit("setShowlefttree", false);
  },
  mounted() {},
  beforeDestroy() {},
  computed: {
    totalPageNumber() {
      //计算总页数
      let number = 0;
      number = Math.ceil(this.total / this.pageSize);
      return number;
    }
  },
  watch: {},
  components: {}
};
</script>

<style scoped lang="less">
.content-page {
  padding: 12px;
  height: 100%;
  .page-header {
    padding-bottom: 12px;
    height: 42px;
    border-bottom: 1px solid #c7d8ee;
  }
  .sub-content {
    height: calc(100% - 67px);
    padding-bottom: 12px;
    > div {
      float: left;
      height: 100%;
    }
    .type-list {
      width: 160px;
      padding-top: 12px;
      ul {
        width: 100%;
        height: 100%;
        .add-btn {
          width: 160px;
          height: 34px;
          line-height: 33px;
          text-align: center;
          border: 1px solid #166bce;
          background: #fff;
          cursor: pointer;
          &:hover {
            opacity: 0.9;
          }
          &:active {
            opacity: 0.7;
          }
          .iconfont {
            font-size: 18px;
            color: #166bce;
          }
        }
        li {
          height: 42px;
          line-height: 36px;
          padding-left: 33px;
          cursor: pointer;
          &.active {
            background: url("../../assets/images/thinkTank/ju-bg.png") no-repeat;
            color: #fff;
            font-weight: bold;
            .icon {
              background: url("../../assets/images/thinkTank/yuan-act.png")
                center center no-repeat;
            }
            .right {
              color: #fff;
            }
          }
          .icon {
            display: inline-block;
            width: 11px;
            height: 11px;
            background: url("../../assets/images/thinkTank/yuan.png") center
              center no-repeat;
            margin-right: 6px;
          }
          .right {
            margin-top: 3px;
            width: 44px;
            text-align: left;
          }
        }
      }
    }
    .table-content {
      width: calc(100% - 210px);
      margin-left: 50px;
      ul {
        width: 100%;
        height: 100%;
        li {
          width: 100%;
          height: 55px;
          line-height: 53px;
          border-bottom: 1px dashed #d9e6f7;
          cursor: pointer;
          &:hover {
            background: #eff3f5;
          }
          .iconfont,
          .bold {
            color: #166bce;
          }
          .iconfont {
            font-size: 16px;
          }
          .btns {
            height: 100%;
          }
        }
      }
    }
  }
  .table-pagination-wrap {
    padding: 0;
    > div {
      padding: 0;
    }
  }
}
</style>
